<template>
	<view class="daily-card" @click="handle">
		<image class="cover" :src="item.cover" mode="widthFix"></image>
		
		<view class="content">{{getContent(item.content)}}</view>
		<uni-dateformat class="date" :date="data.create_time" />
	</view>
</template>

<script>
	export default {
		name: "dailyCard",
		props: {
			item: {
				type: Object
			},
		},
		computed: {
			getContent() {
				return (text) => {
					return text.replace(/\\n/g, '')
				}
			},
		
		},
		methods: {
			handle() {
				uni.navigateTo({
					url:'/pages/daily/daily?id='+this.item._id
				})
			}
		},
	}
</script>

<style scoped lang="scss">

	.daily-card {
		// 如果使用margin-top 会导致滑动列表存在无内容是可滑动
		margin-bottom: 38rpx;
		// background-color: white;
		display: flex;
		flex-direction: column;
		width:45vw;
		font-size: 24rpx;
		align-items: center;
		justify-content: center;
		flex-basis:auto;
		// background-color: white;
		.cover{
			width:300rpx;
			height:400rpx;
			border-radius: 20rpx;
			flex-shrink: 0;
			box-shadow: 20rpx 20rpx 20rpx -15rpx rgba(178,117,242, 0.5);
		}
		
		.content{
			margin-top: 10rpx;
			color:black;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			word-break: break-all;
		}
		.date{
			color: black;
			margin-top: 10rpx;
			font-size: 22rpx;
		}
		
	}
</style>
